import {observer} from 'mobx-react-lite';
import {
  Image,
  ImageBackground,
  ImageBackgroundProps,
  ImageProps,
  View,
} from 'react-native';
import {useGlobalStore} from '../mobx';
import {mergeStyles} from '../themes';
import {useMemo} from 'react';
import defaultImg from '../assets/img/common/img.png';
import {dpw4} from '../constants';
import FastImage, {FastImageProps} from 'react-native-fast-image';

export interface ImgProps extends Omit<FastImageProps, 'source'> {
  url: any;
  themeStyle?: Record<string, any>;
  isJoin?: boolean;
  isTheme?: boolean;
  getImgSize?: (w: number, h: number) => void;
  borderRadius?: number;
}

// 获取最终的图片地址或者资源
const getCurUrl = (isJoin: boolean, domain: string | undefined, url: any) => {
  if (isJoin && domain && url) {
    return {
      uri: domain + url,
    };
  }
  if (!isJoin && url) {
    return /^(http|https)/.test(url) ? {uri: url} : url;
  }
  return undefined;
};

const getResizeMode = (m?: string) => {
  if (m === 'center') return FastImage.resizeMode.center;
  if (m === 'contain') return FastImage.resizeMode.contain;
  return FastImage.resizeMode.cover;
};

export const Img = observer((props: ImgProps) => {
  const {
    url,
    isJoin = true,
    isTheme,
    getImgSize,
    resizeMode,
    style,
    borderRadius = dpw4,
    ...rest
  } = props;
  const {appConfig, theme} = useGlobalStore();

  const source = useMemo(() => {
    if (isTheme) {
      const lu = `../assets/img/${theme}/${url}`;
      return getCurUrl(false, undefined, lu);
    }
    const sourceUrl = getCurUrl(isJoin, appConfig?.WebSiteFileDoMain, url);
    if (typeof getImgSize === 'function' && sourceUrl?.uri) {
      Image.getSize(sourceUrl?.uri, getImgSize, () => {});
    }
    return sourceUrl;
  }, [isJoin, appConfig?.WebSiteFileDoMain, url, isTheme, theme]);

  return (
    <FastImage
      style={[{borderRadius}, style]}
      {...rest}
      source={source || defaultImg}
      resizeMode={
        source ? getResizeMode(resizeMode) : FastImage.resizeMode.contain
      }
    />
  );
});

export const BgImg = observer(
  (
    props: ImageBackgroundProps &
      Pick<ImgProps, 'url' | 'isJoin' | 'themeStyle' | 'isTheme'>,
  ) => {
    const {
      url,
      style,
      themeStyle,
      isTheme,
      isJoin = true,
      children,
      ...rest
    } = props;
    const {appConfig, theme} = useGlobalStore();

    const bgUrl = useMemo(() => {
      if (isTheme) {
        return getCurUrl(false, undefined, `../assets/img/${isTheme}/${url}`);
      }
      return getCurUrl(isJoin, appConfig?.WebSiteFileDoMain, url);
    }, [isJoin, appConfig?.WebSiteFileDoMain, url]);

    if (!bgUrl) {
      return (
        <View style={mergeStyles({style, themeStyle, theme})} {...rest}>
          {children}
        </View>
      );
    }

    return (
      <ImageBackground
        style={mergeStyles({style, themeStyle, theme})}
        {...rest}
        source={bgUrl}>
        {children}
      </ImageBackground>
    );
  },
);
